<!--  -->
<template>
  <a-modal
    @cancel="modalClose"
    :visible="translateModalVisible.visible"
    width="600px"
    wrapClassName="translate-modal"
    :zIndex="1040"
    :forceRender="true"
    :centered="true"
    :footer="null"
  >
    <div class="translate-detail">
      <iframe ref="translateFrame" v-if="translateModalVisible.word" width="100%" :src="frameSrc" height="100%" frameborder="0"></iframe>
    </div>
  </a-modal>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { Modal } from "ant-design-vue";
export default {
  name: "translateModal",
  components: {
    AModal: Modal,
  },
  data() {
    return {
        translates: '',
        frameSrc: 'https://e-school.yixuepai100.com/index/index/searchword?word='
    };
  },
  computed: {
    ...mapState({
      translateModalVisible: (state) => state.translateModalVisible,
    }),
  },
  watch: {
    "translateModalVisible.visible"(val) {
      if (val && this.translateModalVisible.word) {
        this.frameSrc = 'https://e-school.yixuepai100.com/index/index/searchword?word='+ this.translateModalVisible.word
        // this.$refs.translateFrame.contentWindow.location.replace('https://newyxp.sse100.com/index/index/searchword?word='+ this.translateModalVisible.word)
      } else {
        // this.$refs.translateFrame.contentWindow.location.replace('https://newyxp.sse100.com/index/index/searchword?word=')
        // this.frameSrc = 'https://newyxp.sse100.com/index/index/searchword?word='+ this.translateModalVisible.word
        this.setTranslateModal({
          visible: false,
        });
      }
    }
  },
  methods: {
    ...mapMutations(["setTranslateModal"]),
    modalClose() {
      this.setTranslateModal({
        visible: false,
      });
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang="less">
/* @import url(); 引入公共css类 */

.translate-modal {
  .translate-detail {
    height: 400px;
  }
}
</style>
